<template>
  <ul class='list'>
    <li v-for="item in getListData" @click="showMoreInfo(item)">
      <img class="fl" :src="item.img" alt="">
      <div class="content pr">
        <p class="title">姓名：<span class="color999">{{item.name}}</span></p>
        <p class="info">电话：<span class="color999">{{item.phone | formatphone}}</span></p>

        <img :src="imgs.jt" class="pa right btn-active" alt="">
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props:["data"],
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        jt:require('../../../assets/img/works/customer/1.png')
      },
      imgHide:false,
    };
  },
  computed:{
    getListData(){
      return this.data
    }
  },
  filters:{
    formatphone(val){
      return val.slice(0,3)+" "+val.slice(3,7)+" "+val.slice(7)
    }
  },
  methods: {
    showMoreInfo(item){
      sessionStorage.setItem("userId",item.id)
      this.$router.push("/works/customer/detail")
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.list {
  margin: 0 15px;

  li{
    padding: 15px 0;
    min-height: 50px;
    border-bottom: 1px solid #f2f2f2;

    img{
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
    p{
      margin: 5px 0 5px 65px;
      color: #333;
    }

    .info{
      margin-right: 20px;
    }
    .right{
      right: 0;
      width: 20px;
      height: 20px;
      border: 1px solid #FF9F20;
      padding: 5px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>